<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Config</title>
    <script src="js/main.js"></script>
    <script src="js/config-parse.js"></script>
    <script src="js/config-load.js"></script>
    <style>
        * {
            font-size: 16px;
        }

        #groups {
            margin-left: 20px;
        }

        .group {
            margin-bottom: 30px;
            float: left;
        }

        .group-nav {
            margin-left: -10px;
            margin-bottom: 5px;
        }

        .routers {
            margin-left: 15px;
        }

        .router-input {
            width: 750px;
            border: none;
            /*border-top: none;*/
            /*border-left: none;*/
            /*border-right: none;*/
        }

        /*奇数输入框样式 目标URL*/
        /*.router-input:nth-child(even) {*/
        /*    background: #dbe1e8;*/
        /*}*/

        .pathCnf {
            margin-bottom: 30px;
        }

        .pathCnf input {
            margin-left: 20px;
            width: 530px;
            border: none;
            /*border-top: none;*/
            /*border-left: none;*/
            /*border-right: none;*/
        }

        .pathCnf input:nth-child(even) {
            background: #E8E8E9;
        }

        body {
            background: #aaaaaa;
        }

        main {
            margin-left: 15px;
        }

        nav {
            margin-left: 10px;
            margin-bottom: 10px;
        }

        input {
            border-radius: 5px;
        }


        .redis {
            float: left;
            margin-bottom: 20px;
        }

        .pac-file {
            width: 500px;
            height: 400px;
        }

        .pac-file textarea {
            width: 100%;
            height: 100%;
        }

        .all-checkbox {
            width: 21px;
            height: 21px;
        }
    </style>
</head>
<body>

<nav>
    Profile ID: <input id="id">
    <button type="button" onclick="save()">Save</button>
    <button type="button" onclick="refresh()">Refresh</button>
</nav>
<main>
    Groups:
    <button onclick="addGroup()">Add Group</button>
    <div id="groups"></div>

    <br/>
    <div style="float: left">
        <input id="proxy-switch-type" name="proxy_type" type="checkbox" class="all-checkbox"/>
        Proxy:
        <button onclick="addProxyPath('proxy')">Add</button>
        <div id="proxy" class="pathCnf"></div>
        <input id="direct-switch-type" name="proxy_type" type="checkbox" class="all-checkbox"/>
        Direct:
        <button onclick="addProxyPath('direct')">Add</button>
        <div id="direct" class="pathCnf"></div>
    </div>

    <div class="redis" id="redis">
        Redis Addr:
        <input name="addr" type="text" placeholder="host:ip"/>
        Db:
        <input name="db" type="number" style="width: 40px" min="0"/>
        PoolSize:
        <input name="pool_size" type="number" style="width: 40px" min="1"/>
    </div>

    <div style="display: none">
        <div id="group-temp" class="group">
            <div class="group-nav">
                <input name="proxy_type" type="checkbox" class="all-checkbox" checked>
                <input name="name">
                <button onclick="addRoute(this)">Add Route</button>
            </div>
            <!-- <div class="routers" id="router-temp"> -->
            <!-- </div> -->
        </div>

        <div class="routers" id="router-temp">
            <input name="proxy_type" type="checkbox" class="all-checkbox" checked>
            <input name="src" class="router-input">
            <input name="dst" class="router-input">
            <button onclick="deleteRoute(this)">❌</button>
        </div>
    </div>

    <div class="pac-file">
        <textarea id="pac-file-input">
        </textarea>
        <button onclick="savePac()">Save PAC</button>
    </div>

</main>

<script>
    bindKeyDown()
    loadExistConf()
    loadPac()

    function refresh() {
        window.location.reload();
    }

    function bindKeyDown() {
        document.onkeydown = function (event) {
            // Ctrl S
            if (event.ctrlKey === true && event.key === 's') {
                event.preventDefault();
                save()
            }

            // Ctrl D
            if (event.ctrlKey === true && event.key === 'r') {
                event.preventDefault();
                loadExistConf()
            }
        }
    }


</script>
</body>
</html>